<template>
	<view class="container">
		<view class="major-type-box">
			<view class="item-box" @tap="tapItem" data-index="0">
				<view class="item">
					<view class="item-label" :class="{'item-label-active': isShowBox[0]}">文科综合</view>
					<view class="item-line" :class="{'item-line-active': isShowBox[0]}"></view>
				</view>
			</view>
			<view class="item-box" @tap="tapItem" data-index="1">
				<view class="item">
					<view class="item-label" :class="{'item-label-active': isShowBox[1]}">理科综合</view>
					<view class="item-line" :class="{'item-line-active': isShowBox[1]}"></view>
				</view>
			</view>
		</view>

		<view class="list-box" v-show="isShowBox[0]">
			<view class="list-item-box" @tap="goDetail(item.enrollId)" v-for="(item,index) in dataWList" :key="index">
				<view class="list-item-label">{{item.majorName}}</view>
				<view class="list-item-num">{{item.studentNum}}人</view>
			</view>
		</view>
		<view class="list-box" v-show="isShowBox[1]">
			<view class="list-item-box" @tap="goDetail(item.enrollId)" v-for="(item,index) in dataLList" :key="index">
				<view class="list-item-label">{{item.majorName}}</view>
				<view class="list-item-num">{{item.studentNum}}人</view>
			</view>
		</view>

	</view>
</template>

<script>
	//import { http } from '../../utils'

	export default {
		data() {
			return {
				curIndex: 0,
				isShowBox: [true, false],
				paramWs: {
					id: '',
					year: '',
					batch: '',
					mType: 1
				},
				paramLs: {
					id: '',
					year: '',
					batch: '',
					mType: 2
				},
				total: 0,
				dataWList: [{
					enrollId: 1,
						majorName: '经济学',
						studentNum: 20
					},
					{
						enrollId: 2,
						majorName: '国际经济与贸易',
						studentNum: 16
					},
					{
						enrollId: 3,
						majorName: '社会工作',
						studentNum: 20
					},
					{
						enrollId: 4,
						majorName: '法学',
						studentNum: 11
					},
					{
						enrollId: 5,
						majorName: '汉语国际教育',
						studentNum: 12
					},
					{
						enrollId: 6,
						majorName: '英语',
						studentNum: 30
					},
					{
						enrollId: 7,
						majorName: '朝鲜语',
						studentNum: 18
					},
					{
						enrollId: 8,
						majorName: '工商管理',
						studentNum: 17
					}
				],
				dataLList: [{
					enrollId: 9,
						majorName: '数学与应用数学',
						studentNum: 15
					},
					{
						enrollId: 10,
						majorName: '信息与计算科学',
						studentNum: 34
					},
					{
						enrollId: 11,
						majorName: '社会工作',
						studentNum: 20
					},
					{
						enrollId: 12,
						majorName: '化学',
						studentNum: 36
					},
					{
						enrollId: 13,
						majorName: '应用化学',
						studentNum: 54
					},
					{
						enrollId: 14,
						majorName: '生物技术',
						studentNum: 36
					},
					{
						enrollId: 15,
						majorName: '机械设计制造及其自动化',
						studentNum: 108
					},
					{
						enrollId: 16,
						majorName: '车辆工程',
						studentNum: 35
					}
				]
			}
		},
		onLoad(options) {
			/* this.paramWs.id = options.id;
			this.paramWs.year = options.year;
			this.paramWs.batch = options.batch;
			this.paramWs.mType = 1;
			this.fetchWList(this.paramWs);

			this.paramLs.id = options.id;
			this.paramLs.year = options.year;
			this.paramLs.batch = options.batch;
			this.paramWs.mType = 2;
			this.fetchLList(this.paramLs); */

		},
		methods: {

			tapItem(e) {
				this.isShowBox[this.curIndex] = false
				this.curIndex = e.currentTarget.dataset.index
				this.isShowBox[this.curIndex] = true
			},
			fetchWList(data) {
				http('/enrollment-plan/all',
					data, {
						hideLoading: false,
						hideMsg: true,
						method: 'POST'
					}).then(
					res => {
						this.dataWList = res.data.data.list;
					}).catch(
					err => {
						console.error(err)
					})
			},
			
			fetchLList(data) {
				http('/enrollment-plan/all',
					data, {
						hideLoading: false,
						hideMsg: true,
						method: 'POST'
					}).then(
					res => {
						this.dataLList = res.data.data.list;
					}).catch(
					err => {
						console.error(err)
					})
			},
			
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/enrollment_plan_detail/enrollment_plan_detail?id=' + id
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	.container {
		width: 750rpx;
		height: auto;
	}

	.major-type-box {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-end;
	}

	.item-box {
		width: 375rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-label {
		font-size: 28rpx;
		height: 46rpx;
	}

	.item-label-active {
		color: #45d6b7;
	}

	.item-line {
		width: 56rpx;
		height: 4rpx;
		background-color: #ffffff;
	}

	.item-line-active {
		background-color: #45d6b7;
	}

	.list-box {
		background-color: #ffffff;
		width: 750rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 28rpx;
	}

	.list-item-box {
		width: 690rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		border-bottom: solid 1rpx #f5f5f5;
	}
</style>
